<template>
  <div class="first">

    <!-- <div class="lbt">
      <img :src="imgs[flag].src" alt="">
      <button class="last" @click="last">
        <i class="el-icon-caret-left"></i>
      </button>
      <button class="next" @click="next">
        <i class="el-icon-caret-right"></i>
      </button>
    </div> -->

    <!-- 测试 -->
    <div class="lbt">
      <div class="carousel_map">
	      <div class="slide">
          <!--小圆点-->
          <input type="radio" name="pic" id="pic1" checked/>
          <input type="radio" name="pic" id="pic2"/>
          <input type="radio" name="pic" id="pic3"/>
          <input type="radio" name="pic" id="pic4"/>
		
          <div class="labels">
            <label for="pic1"></label>
            <label for="pic2"></label>
            <label for="pic3"></label>
            <label for="pic4"></label>
          </div>
		
          <!--需要轮播的图片-->
          <ul class="list">
            <li class="item" v-for="(item,index) in imgs" :key="index">
              <a href="###">
                <img :src="item.src" style="height: 100%; width: 100%;"/>
              </a>
            </li>
            <li class="item">
              <a href="###">
                <img :src="imgs[0].src" style="height: 100%; width: 100%;"/>
              </a>
            </li>
          </ul>
	      </div>
    </div>
  </div>
    


    <!-- 新鲜出炉、品质靠谱 -->
    <div class="fresh">
      <div class="fresh_top">
        <span>新鲜好物</span>
        <a href="#javascript;">查看全部>></a>
      </div>
      <div class="fresh_list">
        <div class="fresh_item" v-for="(fresh,index) in freshs" :key="index">
          <div class="fresh_img">
            <img :src="fresh.src" alt="">
          </div>
          <div class="fresh_detail">
            <span style="font-size:1.4vw">{{ fresh.detail }}</span>
            <div style="font-size:1.8vw;color:red">￥{{ fresh.price }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 人气爆款、不容错过 -->
    <div class="popular">
      <div class="popular_top">
        <span>人气推荐</span>
        <a href="#javascript;">查看全部>></a>
      </div>
      <div class="popular_list">
        <div class="popular_item" v-for="(popular,index) in populars" :key="index">
          <div class="popular_img">
            <img :src="popular.src" alt="">
          </div>
          <div class="popular_detail">
            <span style="font-size:1.4vw">{{popular.detail }}</span>
            <div style="font-size:1.8vw;color:#999">{{ popular.text }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 国际经典、品质保证 -->
    <div class="brand">
      <div class="brand_top">
        <span>热门品牌</span>
        <a href="#javascript;">查看全部>></a>
      </div>
      <div class="brand_list">
        <div class="brand_item" v-for="(brand,index) in brands" :key="index">
          <div class="brand_img">
            <img :src="brand.src" alt="">
          </div>
          <div class="brand_detail">
            <span>{{brand.detail }}</span>
            <div style="font-size:20px;color:#999">{{ brand.text }}</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Bus from '../../../Bus'
export default {
  name:'first',
  data(){
    return{
      imgs:[
        {src:require('../../../assets/轮播图/1.jpg')},
        {src:require('../../../assets/轮播图/2.jpg')},
        {src:require('../../../assets/轮播图/3.jpg')},
        {src:require('../../../assets/轮播图/4.jpg')},
      ],
      flag:0,
      freshs:[
        {src:require('../../../assets/首页/全棉纸.png'),detail:'全棉纸',price:29},
        {src:require('../../../assets/首页/红酒.png'),detail:'红酒',price:179},
        {src:require('../../../assets/首页/红宝石项链.png'),detail:'红宝石项链',price:2099},
        {src:require('../../../assets/首页/水果面膜.png'),detail:'水果面膜',price:35},
      ],
      populars:[
      {src:require('../../../assets/首页/popular_1.jpg'),detail:'特惠推荐',text:'它们最实惠'},
      {src:require('../../../assets/首页/popular_2.jpg'),detail:'爆款推荐',text:'它们最受欢迎'},
      {src:require('../../../assets/首页/popular_3.jpg'),detail:'一站买全',text:'使用场景下精心优选'},
      {src:require('../../../assets/首页/popular_4.jpg'),detail:'领劵中心',text:'更多超值优惠券'}
      ],
      brands:[
      {src:require('../../../assets/首页/品牌1.jpg')},
      {src:require('../../../assets/首页/品牌2.jpg')},
      {src:require('../../../assets/首页/品牌3.jpg')},
      {src:require('../../../assets/首页/品牌4.jpg')},
      {src:require('../../../assets/首页/品牌6.jpg')},
      ]
    }
  },
  methods:{
    



    fun(){
      setInterval(()=>{
        this.flag++
        if(this.flag>3){
          this.flag=0
        }
      },3000)
    },
    last(){
      this.flag--
      if(this.flag<0){
        this.flag=3
      }
    },
    next(){
      this.flag++
      if(this.flag>3){
        this.flag=0
      }
    }
  },
  mounted(){
    // this.fun()
    // this.autoSwitch = setInterval(()=>{ // 自动切换
    //   this.switchImg(-2);
    // },2000)
  }
}
</script>

<style scoped>
@import '../../../assets/lbt.css';

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.first{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.lbt{
  position: relative;
  width: 80vw;
  display: flex;
  /* background-color: pink; */
  /* margin-top: 1px;
  margin-left: 150px; */
}
.lbt img{
  width: 100%;
}
.last{
  position: absolute;
  left: 6%;
  top: 40%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 25px;
  outline: none;
  background-color: white;
  opacity: 0.3;
}
.next{
  position: absolute;
  left: 88%;
  top: 40%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 25px;
  outline: none;
  background-color: white;
  opacity: 0.3;
}
/* 新鲜好物 */
.fresh,.popular,.brand{
  margin-top: 20px;
  width: 80%;
  overflow: hidden;
}

.fresh_top,.popular_top,.brand_top{
  display: flex;
  justify-content: space-between;
}
.fresh_top span,.popular_top span,.brand_top span{
  font-size: 2vw;
}
.fresh_top a,.popular_top a,.brand_top a{
  color: #999;
  font-size: 1.4vw;
}
.fresh_top a:hover,.popular_top a:hover,.brand a:hover{
  color: rgb(39,186,155);
}
.fresh_list,.popular_list{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.brand_list{
  width: 100%;
  /* height: 325px; */
  display: flex;
  justify-content: space-between;
}
.fresh_item,.popular_item{
  /* background-color: red; */
  margin-top: 20px;
  /* margin-right: 5px; */
  width: 24.67%;
  height: auto;
  display: flex;
  flex-direction: column;
  transition: all 0.5s;
}
.brand_item{
  margin-top: 20px;
  width: 19.75%;
  /* height: 320px; */
  transition: all 0.5s;
}
.fresh_item:hover,.popular_item:hover,.brand_item:hover{
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.fresh_img img,.popular_img img{
  width: 100%;
  height: auto;
}
.brand_img img{
  width: 100%;
  height: auto;
}
.fresh_detail,.popular_detail{
  margin-top: -4px;
  padding-top:10px ;
  flex: 1;
  background-color: #f0f9f4;
  text-align: center;
}
</style>